<template>
    <div>
        <div>
            <Row>
                <Col span="5">
                    <Input v-model="value14" placeholder="地址..." clearable style="width: 200px" />
                </Col>
                <Col span="5">
                    <Input v-model="value14"  placeholder="单位名称..." clearable style="width: 200px" />
                </Col>
                <Col span="4" >
                    <Button type="primary" class="lyx-mr10" @click="modal1 = true" >查询</Button>
                    <Modal
                            v-model="modal1"
                            title="查询详情"
                            @on-ok="ok"
                            @on-cancel="cancel">
                        <p>请输入正确查询信息</p>
                        <div slot="footer"></div>
                    </Modal>
                    <Modal
                            v-model="modal2"
                            title="审批"
                            @on-ok="ok"
                            @on-cancel="cancel">
                        <div slot="footer"></div>
                        <Form label-position="right" :label-width="100">
                            <Row>
                                <Col span="5" class="ivu-form-item-label">审批意见：</Col>
                                <Col span="16" class="ivu-form-item-content">
                                    <Input  type="textarea" :autosize="{minRows: 3,maxRows: 7}"></Input>
                                </Col>
                            </Row>
                            <Row type="flex" justify="end" style="margin-top: 8px;margin-right: 60px">
                                <Button type="success" style="margin-right:100px; ">同意申请</Button>
                                <Button type="error" style="margin-right: 35px;">拒绝申请</Button>
                            </Row>
                        </Form>
                    </Modal>
                </Col>
            </Row>
            <Modal
                    v-model="modal3"
                    title="查询详情"
                    width="50"
            >
                <Divider orientation="left">项目内容</Divider>
                <Row>
                    <Col span="12" style="margin-top: 10px">
                        <span class="bold">编号:</span>
                        <span>{{inf.id}}</span>
                    </Col>
                    <Col span="10" style="margin-top: 10px">
                        <span class="bold">地址：</span>
                        <span>{{inf.address}}</span>
                    </Col>
                </Row>
                <Row>
                    <Col span="12" style="margin-top: 10px">
                        <span class="bold">申请单位:</span>
                        <span>{{inf.company}}</span>
                    </Col>
                    <Col span="10"  style="margin-top: 10px">
                        <span class="bold">申请时间：</span>
                        <span>{{inf.time}}</span>
                    </Col>
                </Row>
<!--                <Row>-->
<!--                    <Col span="12"  style="margin-top: 10px">-->
<!--                        <span class="bold">申请报告:</span>-->
<!--                        <span>{{inf.sqReport}}</span>-->
<!--                    </Col>-->
<!--                    <Col span="10"  style="margin-top: 10px">-->
<!--                        <span class="bold">可行性报告：</span>-->
<!--                        <span>{{inf.doReport}}</span>-->
<!--                    </Col>-->
<!--                </Row>-->
                <Row class="p10">
                    <Col span="12" style="margin-top: 10px">
                        <span>联办：</span>
                        <span>{{inf.lianban}}</span>
                    </Col>
                    <Col span="10" style="margin-top: 10px">
                        <span>国土部门使用预审意见:</span>
                        <span>{{inf.ysyijian}}</span>
                    </Col>
                    <Col span="12" style="margin-top: 10px">
                        <span>环保部门的审核意见：</span>
                        <span>{{inf.shyijian}}</span>
                    </Col>
                </Row>
                <Divider orientation="left">审批文件</Divider>
                <Row type="flex" justify="center" align="middle">
                    <Col span="3"> <span>申请报告：</span></Col>
                    <Col span="9" style="margin-top: 20px">
                        <span><img src="../../../../assets/images/baogao.jpg" style="width: 100px;height: 150px"></span>
                    </Col>
                    <Col span="3"><span>可行性报告：</span></Col>
                    <Col span="9" style="margin-top: 20px">&nbsp;
                        <span><img src="../../../../assets/images/baogao1.jpg" style="width: 100px;height: 150px;"></span></Col>
                </Row>
                <Row type="flex" justify="center" align="middle" >
                    <Col span="3"><span>合同文件：</span></Col>
                    <Col span="9" style="margin-top: 20px">
<!--                        <span class="bold" >合同文件：</span>-->
                        <span><img src="../../../../assets/images/hetong.jpg" style="width: 100px;height: 150px"></span>
                    </Col>
                    <Col span="3"><span>规划部门审批文件：</span></Col>
                    <Col span="9" style="margin-top: 20px">&nbsp;
<!--                        <span class="bold">规划部门审批文件：</span>-->
                        <span><img src="../../../../assets/images/hetong.jpg" style="width: 100px;height: 150px"></span></Col>
                </Row>
                <Row type="flex" justify="center" align="middle">
                    <Col span="3"> <span>验资报告证明：</span></Col>
                    <Col span="9" style="margin-top: 20px">
<!--                        <span class="bold">合同文件：</span>-->
                        <span><img src="../../../../assets/images/baogao.jpg" style="width: 100px;height: 150px"></span>
                    </Col>
                    <Col span="3"><span>林业部审定批准文件：</span></Col>
                    <Col span="9" style="margin-top: 20px">&nbsp;
<!--                        <span class="bold">林业部审定批准文件：</span>-->
                        <span><img src="../../../../assets/images/shenpiwenjian.jpg" style="width: 100px;height: 150px;"></span></Col>
                </Row>
                <Row type="flex" justify="center" align="middle">
                    <Col span="3"> <span>法人资格证明文件：</span></Col>
                    <Col span="9" style="margin-top: 20px">
                        <!--                        <span class="bold">合同文件：</span>-->
                        <span><img src="../../../../assets/images/baogao1.jpg" style="width: 100px;height: 150px"></span>
                    </Col>
                    <Col span="3"><span>营业执照：</span></Col>
                    <Col span="9" style="margin-top: 20px">&nbsp;
                        <!--                        <span class="bold">林业部审定批准文件：</span>-->
                        <span><img src="../../../../assets/images/yingyezhizhao.jpg" style="width: 100px;height: 150px;"></span></Col>
                </Row>
                <Row type="flex" justify="center" align="middle">
                    <Col span="3"> <span>拟建公墓地形：</span></Col>
                    <Col span="9" style="margin-top: 20px">
                        <!--                        <span class="bold">合同文件：</span>-->
                        <span><img src="../../../../assets/images/dixing.png" style="width: 100px;height: 150px"></span>
                    </Col>
                    <Col span="3"><span>地理位置平行规划图：</span></Col>
                    <Col span="9" style="margin-top: 20px">&nbsp;
                        <!--                        <span class="bold">林业部审定批准文件：</span>-->
                        <span><img src="../../../../assets/images/map.png" style="width: 100px;height: 150px;"></span></Col>
                </Row>

            </Modal>

            <Table border :columns="columns2" :data="data1" style="margin-top: 10px"></Table>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      modal1: false,
      modal2: false,
      modal3: false,
      value14: '',
      columns2: [
        {
          title: '编号',
          key: 'id'
        },
        {
          title: '地址',
          key: 'address'
        },
        {
          title: '申请单位',
          key: 'company'
        },
        {
          title: '申请时间',
          key: 'time'
        },
        {
          title: '操作',
          key: 'action',
          width: 250,
          align: 'center',
          render: (h, params) => {
            let _this = this
            return h('div', [
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                on: {
                  click: () => {
                    console.log(this)
                    this.modal2 = true
                  }
                }
              }, '审批'),
              h('span', {
                props: {

                },
                on: {
                  click: () => {

                  }
                }
              }, ' '),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                on: {
                  click: () => {
                    _this.show(params.row)
                  }
                }
              }, '查看详情')
            ])
          }
        }
      ],

      data1: [{
        id: 1,
        address: '辽宁省沈阳市沈北新区G101',
        company: '隆宝山墓园',
        time: '2018.5.4'
      },
      {
        id: 2,
        address: '沈阳市沈北新区',
        company: '龙生墓园',
        time: '2015.3.10'
      },
      {
        id: 3,
        address: '辽宁省沈阳市大东区榆林大街85号',
        company: '东山公墓',
        time: '2003.4.5'
      },
      {
        id: 4,
        address: '辽宁省沈阳市沈北新区轩盛路',
        company: '回龙岗公墓',
        time: '2015.1.1'
      },
      {
        id: 5,
        address: '盛京寝园北区',
        company: '英达镇英达村',
        time: '2003.4.11'
      },
      {
        id: 6,
        address: '大河贝墓园',
        company: '万山路佳境天城40号',
        time: '2010.6.15'
      },
      {
        id: 7,
        address: '辽宁省沈阳市铁西区重工南街50号',
        company: '圣河山墓园',
        time: '2013.9.5'
      },
      {
        id: 8,
        address: '辽宁省沈阳市铁西区南十一路9-8门附近',
        company: '龙泉墓园',
        time: '208.4.2'
      },
      {
        id: 9,
        address: '辽宁省沈阳市于洪区洪湖街17号附近 ',
        company: '寿衣观陵山公墓',
        time: '2001.11.12'
      },
      {
        id: 10,
        address: '辽宁省沈阳市沈河区文化东路76号7门附近',
        company: '辽宁福山公墓',
        time: '2001.7.11'
      }
      ],
      inf: []
    }
  },
  methods: {
    ok () {
      this.$Message.info('点击了确定')
    },
    cancel () {
      this.$Message.info('点击了取消')
    },
    show111 () {
      this.modal2 = true
    },
    show (index) {
      this.inf = index
      console.log(index)
      this.modal3 = true
      // this.$Modal.info({
      //   title: '用户信息',
      //   width: 60,
      //   content: '编号：' + index.row.id + '<br>地址：' + index.row.adrress + '<br>申请单位：' + index.row.company + '<br>申请时间：' + index.row.time + '<br>申请报告：' + index.row.sqReport +
      //                   '<br>可行性报告：' + index.row.lianban + '<br>可行性报告：' + index.row.wenjian + '<br>可行性报告：' + index.row.doReport + '<br>可行性报告：' + index.row.doReport +
      //                   '<br>可行性报告：' + index.row.doReport
      //   // index.row.id
      //   // console.log(index)
      // })
    }
  }
}

</script>

<style scoped>

</style>
